import React from 'react';
import { Modal, Form, Input } from 'antd';
import { formItemLayout } from '../common';

const FormItem = Form.Item;
const confirm = Modal.confirm;


class AddAttrModal extends React.Component {
  constructor(p) {
    super(p);
    this.handleOK = this.handleOK.bind(this);
  }

  handleOK() {
    const {
      validateFields,
      getFieldsValue,
    } = this.props.form;
    validateFields((err) => {
      if (!err) {
        const value = getFieldsValue();
        // confirm({
        //   title: '提示',
        //   content: `属性id:${value.key},确认吗？`,
        //   onOk: () => {
        //   },
        // });
        this.props.onFinish(value);
      }
    });
  }

  render() {
    const {
      form, visible, keys,
    } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Modal
        visible={visible}
        title="添加属性"
        onOk={this.handleOK}
        onCancel={() => this.props.onFinish()}
      >
        <Form>
          <FormItem label="属性ID" hasFeedback {...formItemLayout}>
            {
              // TODO: 后续需要改为英文，并且加入id唯一标示性认证
              getFieldDecorator(
                'key', {
                  rules: [
                    {
                      required: true,
                      message: '属性id不能为空',
                    },
                    {
                      validator: (rules, value, callback) => {
                        if (!/[a-zA-Z0-9_]+/.test(value)) {
                          return callback('id只能是数字，英文，_组成的符号');
                        }
                        if (keys.indexOf(value) >= 0) {
                          return callback(`${value}已经存在，不能再添加`);
                        }
                        return callback();
                      },
                    },
                  ],
                },
              )(<Input placeholder="输入属性id" />)
            }
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

AddAttrModal.defaultProps = {
  onFinish: () => null,
  keys: [],
};

export default Form.create()(AddAttrModal);
